/**
 * Class for a single Svg element
 * @class SvgElement
 * @extends Class
 * @constructor
 * @param {string} type Type of svg element. Eg: 'circle', 'rect', 'g', etc.
 * @param {SVGElement} Dom svg DOM element of the parent container
 * @param {SvgCanvas} The svg stage/canvas
 * @author Helge Andersen
 */
var SvgElement = {
    canvas: null,

    dom: null,
    
    _listeners: [],
    
    /**
     * Constructor
     * @private
     */
    init: function(type, parent, canvas) {
        var svg = document.createElementNS("http://www.w3.org/2000/svg", type);
        this.dom = svg;
        this.canvas = canvas ? canvas : svg;
        (parent ? parent : document.body).appendChild(svg);
    },
    
    /**
     *  Set attributes for an element if argument is supplied. <br>
     *  If no argument is supplied return the attributes as a javascript object.<br>
     *  Read SVG specifications for valid attributes<br>
     *  Example: el.attr({ fill: "#ff00ff" });
     *  @method attr
     *  @param {object} v 
     *  @return {SvgElement} this  
     */
    attr: function(v) {
        if (!v) {
            var a = {}, d = this.dom.attributes;
            for (var i=0; i<d.length; i++) a[d[i].name] = d[i].value;return a;
        }
        for (var a in v){this.dom.setAttribute(a, v[a]);} 
        return this;
    },
    
    /**
     * Register an event handler
     * @method on
     * @param {String} e name of the event
     * @param {Function} fn
     * @param {Object} scope set the scope you want the function to run in
     * @return {SvgElement} this
     */
    on: function(e, fn, scope)  {
        var evFn = scope ? function() {return fn.call(scope);} : fn;
        this.dom.addEventListener(e, evFn, false);   
        return this;
    },
    
    /**
     *  Add animation for an element. <br>
     *  Read SVG specifications for valid attributes<br>
     *  Example: el.animate({ attributeName: "x", values: "0;40", dur: "3s", repeatCount: "indefinite" });
     *  @method attr
     *  @param {object} attr 
     *  @return {SvgElement} this  
     */
    animate: function(attr) {
        return new SvgElement("animate", this.dom, this.canvas).attr(attr);
    },
    
    /**
     *  Add animation transformation for an element. <br>
     *  Read SVG specifications for valid attributes<br>
     *  Example: el.animateTransform({ attributeName:"transform", type:"rotate", from:"0", to:"90", dur:"10s", repeatCount:"indefinite" });
     *  @method attr
     *  @param {object} attr 
     *  @return {SvgElement} this  
     */
    animateTransform: function(attr) {
        return new SvgElement("animateTransform", this.dom, this.canvas).attr(attr);
    },
    
    /**
     *  Add animation motion for an element. <br>
     *  Read SVG specifications for valid attributes<br>
     *  Example: el.animateMotion({ path:"M10 50 C10 0 90 0 90 50", dur:"10s", rotate:"auto", repeatCount:"indefinite" });
     *  @method attr
     *  @param {object} attr 
     *  @return {SvgElement} this  
     */
    animateMotion: function(attr) {
        return new SvgElement("animateMotion", this.dom, this.canvas).attr(attr);
    }
};
SvgElement = Class.extend(SvgElement);
